import React, { useRef, useEffect, useState } from 'react';
import { Spin } from 'antd';

import {
  ProFormText,
  ProFormTextArea,
  ProFormSelect,
  ModalForm,
  ModalFormProps,
  ProFormDigit,
  ProFormInstance,
} from '@ant-design/pro-form';
import { services } from '@/network/api';

export type formProps = {
  id?: number;
  _onFinish?: Function;
};

const getUserList = async (params: any) => {
  let res = await services.getUserList({ noPagination: true, noMsg: true });
  return res?.data?.map((item: any) => {
    return {
      label: item.name,
      value: item.id,
    };
  });
};

const TableForm: React.FC<ModalFormProps & formProps> = (props) => {
  const { visible, id, _onFinish, ...restProps } = props;
  const formItemLayout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
  };
  const formRef = useRef<ProFormInstance<any>>();
  const [spinning, setSpinning] = useState(false);

  useEffect(() => {
    const getJob = async () => {
      setSpinning(true);
      if (id && visible) {
        let res = await services.getJob({ id });
        res.data.users = res?.data?.users?.map((user: any) => {
          return user.id;
        });
        formRef.current?.setFieldsValue(res.data);
      } else {
        formRef.current?.resetFields();
      }
      setSpinning(false);
    };
    getJob();
  }, [id, visible]);

  // const [routeList, setRouteList] = useState([]);
  // //获取路由树
  // useEffect(() => {
  //   const getRouteTree = async () => {
  //     const res = await services.getRouteTreeList({ noMsg: true, noThrottle: true });
  //     let data = utils.obj.treeSelectFormData(res?.data, {
  //       title: 'name',
  //       value: 'id',
  //       children: 'children',
  //     });
  //     setRouteList(data || []);
  //   };
  //   getRouteTree();
  // }, []);

  const onFinish = async (values: any) => {
    await services.saveJob(values);
    _onFinish?.();
  };
  return (
    <>
      <ModalForm
        {...restProps}
        formRef={formRef}
        title={id ? '编辑岗位' : '新建岗位'}
        width="500px"
        visible={visible}
        onFinish={onFinish}
        initialValues={{ state: 1, order: 0 }}
        layout="horizontal"
        {...formItemLayout}
      >
        {' '}
        <Spin spinning={spinning}>
          <div className="hide">
            <ProFormDigit label="岗位id" name="id" fieldProps={{ precision: 0, disabled: true }} />
          </div>
          <ProFormText
            label="岗位名称"
            rules={[
              {
                required: true,
                message: '请输入岗位名称',
              },
            ]}
            name="name"
          />
          <ProFormDigit
            label="岗位顺序"
            name="order"
            rules={[
              {
                required: true,
                message: '请输入岗位顺序',
              },
            ]}
            fieldProps={{ precision: 0 }}
          />
          <ProFormSelect
            label="用户角色"
            name="users"
            fieldProps={{ mode: 'multiple' }}
            request={getUserList}
          />
          {/* <Form.Item name="routes" label="路由权限">
            <TreeSelect treeCheckStrictly={true} treeData={routeList} treeCheckable={true} />
          </Form.Item> */}
          <ProFormTextArea label="备注" name="describe" />
        </Spin>
      </ModalForm>
    </>
  );
};

export default TableForm;
